<template>

  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="计薪设置" name="first" />
          <el-tab-pane label="津贴设置" name="second" />
        </el-tabs>
      </el-card>

      <el-card v-if="activeName==='first'">
        <el-form ref="form" :model="form" class="formStyle">
          <el-form-item>
            <span class="spanWidth">对应社保自然月</span>
            <el-select v-model="form.region" style="width:300px">
              <el-option label="次月" value="1" />
              <el-option label="本月" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-row>
              <span class="spanWidth">社保数据来源</span>
              <el-input value="社保模块" :disabled="true" style="width:300px" />
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row>
              <span class="spanWidth">考勤数据来源</span>
              <el-input value="考勤模块" :disabled="true" style="width:300px" />
            </el-row>
          </el-form-item>
          <el-form-item>
            <div style="margin-left: 100px;">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button></div>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card v-if="activeName==='second'">
        <el-form ref="sendForm" :model="sendForm" status-icon label-width="100px" class="demo-ruleForm formStyle">
          <el-form-item label="通用方案" prop="pass">
            <el-input v-model="sendForm.subsidyName" style="width: 400px;" autocomplete="off" />
          </el-form-item>
          <el-form-item label="备注" prop="checkPass">
            <el-input v-model="sendForm.subsidyRemark" style="width: 400px;" value="适用于全体" autocomplete="off" />
          </el-form-item>
          <el-form-item label="津贴名称" prop="age" class="nameList">
            <p>
              <el-input placeholder="交通补贴" style="width: 200px;" :disabled="true" />
              <el-select v-model="sendForm.transportationSubsidyScheme" placeholder="请选择">
                <el-option v-for="item in subsidySchemes" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-tooltip placement="top">
                <i class="el-icon-bell" />
              </el-tooltip>
              <el-input v-model="sendForm.transportationSubsidyAmount" placeholder="请输入内容" style="width: 200px;" />
            </p>
            <p>
              <el-input placeholder="通讯补贴" style="width: 200px;" :disabled="true" />
              <el-select v-model="sendForm.communicationSubsidyScheme" placeholder="请选择">
                <el-option v-for="item in subsidySchemes" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-tooltip placement="top">
                <i class="el-icon-bell" />
              </el-tooltip>
              <el-input v-model="sendForm.communicationSubsidyAmount" placeholder="请输入内容" style="width: 200px;" />
            </p>
            <p>
              <el-input placeholder="午餐补贴" style="width: 200px;" :disabled="true" />
              <el-select v-model="sendForm.lunchAllowanceScheme" placeholder="请选择">
                <el-option v-for="item in subsidySchemes" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-tooltip placement="top">
                <i class="el-icon-bell" />
              </el-tooltip>
              <el-input v-model="sendForm.lunchAllowanceAmount" placeholder="请输入内容" style="width: 200px;" />
            </p>
            <p>
              <el-input placeholder="住房补助" style="width: 200px;" :disabled="true" />
              <el-select v-model="sendForm.housingSubsidyScheme" placeholder="请选择">
                <el-option v-for="item in subsidySchemes" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-tooltip placement="top">
                <i class="el-icon-bell" />
              </el-tooltip>
              <el-input v-model="sendForm.housingSubsidyAmount" placeholder="请输入内容" style="width: 200px;" />
            </p>
          </el-form-item>
          <el-form-item label="适用计税方式" prop="age">
            <template>
              <el-radio v-model="sendForm.taxCalculationType" label="1">税前</el-radio>
              <el-radio v-model="sendForm.taxCalculationType" label="2">税后</el-radio>
            </template>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getSalaryssetting, saveSalalysSetting } from '@/api/salarys'
export default {
  data() {
    return {
      activeName: 'first',
      form: {},
      sendForm: {
        communicationSubsidyAmount: '',
        communicationSubsidyScheme: '3',
        companyId: '1',
        housingSubsidyAmount: '',
        housingSubsidyScheme: '',
        lunchAllowanceAmount: '',
        lunchAllowanceScheme: '',
        socialSecurityType: '',
        subsidyName: '',
        subsidyRemark: '',
        taxCalculationType: '',
        transportationSubsidyAmount: '',
        transportationSubsidyScheme: ''
      },
      subsidySchemes: [
        { 'id': 1, 'name': '每出勤日' },
        { 'id': 3, 'name': '每月固定' }
      ]
    }
  },
  created() {
    this.getSalaryssetting()
  },
  methods: {
    async getSalaryssetting() {
      this.sendForm = await getSalaryssetting()
      //   console.log(res)
      this.sendForm.taxCalculationType = String(this.sendForm.taxCalculationType)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    async submitForm() {
      // 发送请求
      await saveSalalysSetting(this.sendForm)
      // 提示信息
      this.$message.success('保存成功')
    },
    resetForm() {
      this.getSalaryssetting()
    }
  }
}
</script>

<style lang="scss" scoped>
.card{
    span{
        display: inline-block;
        margin-right: 20px;
    }
}
::v-deep .el-select{
  .el-input__inner{

  width: 300px !important;
  }
}
 .spanWidth{
  display: inline-block;
  width: 140px;
  // margin-right: 80px;
}
::v-deep .el-card {
  margin-bottom: 10px;
 .el-card__body{
  padding: 0 20px 0;
  .el-tabs__header{
    margin-bottom: 0;
  }
  .formStyle{
    margin: 20px;
  }
}
}

</style>
